<style type="text/css">
    .red_imp{
        color: red!important;
    }
</style>
<div id="link_arctype" style="margin-top: 10px;">
    <div class="flexigrid">
        <div class="hDiv">
            <div class="hDivBox">
                <table cellpadding="0" cellspacing="0" style="width: 100%">
                    <thead>
                        <tr>
                            <th axis="col3" class="">
                                <div class="sundefined text-l10">
                                    {if condition="!empty($tree['cookied_treeclicked'])"}
                                    <img src="__SKIN__/images/tv-collapsable-last.gif" id="all_treeclicked" title="关闭所有子分类" style="float: none;" data-status="open" onclick="treeClicked(this, 'all', 0);">
                                    {else /}
                                    <img src="__SKIN__/images/tv-expandable.gif" id="all_treeclicked" title="展开所有子分类" style="float: none;" data-status="close" onclick="treeClicked(this, 'all', 0);">
                                    {/if}分类名称
                                </div>
                            </th>
                            <th axis="col2" class="w100"> <div class="tc">分类图片</div> </th>
                            <th axis="col1" class="w60"> <div class="tc">操作</div> </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div id="flexigrid" class="bDiv" style="height: auto;">
        {empty name="arctype_list"}
            <div id="" cellpadding="0" cellspacing="0" border="0">
                <table>
                    <tbody>
                        <tr>
                            <td class="no-data" align="center" axis="col0" colspan="50">
                                <div class="no_row"> <div class="no_pic"> <img src="__SKIN__/images/null-data.png"> </div> </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="iDiv" style="display: none;"></div>
        {else /}
            <table class="flex-table autoht" cellpadding="0" cellspacing="0" border="0" id="arctype_table" style="width: 100%">
                <tbody id="treet1">
                {foreach name="arctype_list" item="vo" key="k" }
                    <tr nctype="0" {if condition="!in_array($vo.parent_id,$tree.cookied_treeclicked) && 0 < $vo.parent_id "} style="display:none;"{/if} class="parent_id_{$vo['parent_id']}" data-level="{$vo['level']}" data-id="{$vo['id']}">
                        <td class="typename" style="width: 100%">
                            <div>
                                {gt name='vo.level' value='0'}
                                    {php}
                                    if (1 == $vo['level']) {
                                        echo '<span class="w40x"></span>';
                                    } else if ($vo['level'] >= 2) {
                                        echo '<span class="w40x w40xc'.$vo['level'].'" style="margin-right:'.(($vo['level'] - 1) * 25).'px;"></span>';
                                    }
                                    {/php}
                                {/gt}
                                {gt name="vo.has_children" value="0"}
                                    <img src="{in name='$vo.id' value='$tree.cookied_treeclicked'}__SKIN__/images/tv-collapsable-last.gif{else /}__SKIN__/images/tv-expandable.gif{/in}" style="float: none;" fieldid="2" status="open" nc_type="flex" onclick="treeClicked(this, {$vo['id']}, 0);" class="has_children childrenImg" data-level="{$vo['level']}" data-id="{$vo['id']}">
                                {else /}
                                    <img src="__SKIN__/images/tv-collapsable-last.gif" style="float: none;" fieldid="2" status="open" nc_type="flex" class="childrenImg">
                                {/gt}
                                {$vo.typename}
                            </div>
                        </td>
                        <td class="sort">
                            <div class="w100 tc p0">
                                <div class="image-li">
                                    <img class="image-content" src="{$vo.litpic|get_default_pic=###}" onclick="Images('{$vo.litpic|get_default_pic=###}', 900, 600);">
                                </div>
                            </div>
                        </td>
                        <td class="operation">
                            <div class="w60 tc">
                                <a href="javascript:void(0);" data-typeid="{$vo.id}" data-typename="{$vo.typename}" id="a_arctype_btn_{$vo.id}" onclick="selectActype(this);" class="btn blue select_btn">选择</a>
                            </div>
                        </td>
                    </tr>
                {/foreach}
                </tbody>
            </table>
        {/empty}
        </div>
    </div>
    <textarea id="linkarctype_jsondata" style="display: none;">{$linkGroup[$ad_host_id]|json_encode=###}</textarea>
</div>

<script type="text/javascript">

    $(function() {
        $('#a_arctype_btn_{$ad_link_id}').click();
    });

    function selectActype(obj)
    {
        $('#link_arctype a.select_btn').html('选择').removeClass('red_imp').addClass('blue');
        $(obj).html('已选').removeClass('blue').addClass('red_imp');
        $('#link_id').val($(obj).attr('data-typeid'));
        $('#host_id').val({$ad_host_id|default=0});
        $('#link_names').val($(obj).attr('data-typename'));
        $('#link_jsondata').val($('#linkarctype_jsondata').val());
    }

    $(function() {
        setCookies('admin-treeLinkClicked-Arr',JSON.stringify({$tree.cookied_treeclicked_arr}) );
    });

     // 点击展开 收缩节点
    function treeClicked(obj,id,reload) {
        if (id == 'all') {
            if (1 == reload) {
                var status = getCookie('admin-treeLinkClicked');
                if (!status) status = $(obj).attr('data-status');
            } else {
                var status = $(obj).attr('data-status');
            }
            if (status == 'close') {
                setCookies('admin-treeLinkClicked-Arr', JSON.stringify({$tree.parent_ids}));
                setCookies('admin-treeLinkClicked_All', 1);//1为全部展开,0-为非全部展开
                $('tr[class^=parent_id_]').show();
                $('.childrenImg').attr('src', '__SKIN__/images/tv-collapsable-last.gif');
                $(obj).attr('data-status', 'open').attr('title','关闭所有子分类').attr('src','__SKIN__/images/tv-collapsable-last.gif');
            } else {
                setCookies('admin-treeLinkClicked-Arr', '');
                setCookies('admin-treeLinkClicked_All', 0);
                $('tr[data-level=0]').find('img.has_children').attr('src', '__SKIN__/images/tv-collapsable-last.gif').trigger('click');
                $('tr[class^=parent_id_]').removeClass('trSelected');
                $(obj).attr('data-status', 'close').attr('title','展开所有子分类').attr('src','__SKIN__/images/tv-expandable.gif');
            }
            setCookies('admin-treeClicked', status);
            return false;
        }

        var src = $(obj).attr('src');
        if (src == '__SKIN__/images/tv-expandable.gif') {
            var arr = [];
            var str = getCookie('admin-treeLinkClicked-Arr');
            if ('' == str || null == str || 'null' == str) {
                arr.push(id);
            } else {
                arr = JSON.parse(str);
                if (!arr.includes(id))arr.push(id);
            }
            arr = JSON.stringify(arr);
            setCookies('admin-treeLinkClicked-Arr', arr);
            $(".parent_id_"+id).show();
            $(obj).attr('src','__SKIN__/images/tv-collapsable-last.gif');
            var status = 'close';
        } else {
            var key = -1;
            var arr = [];
            var level = '';
            var str = getCookie('admin-treeLinkClicked-Arr');
            if ('' != str) {
                arr = JSON.parse(str);
                key = $.inArray(id,arr);
                if (-1 < key) arr.splice(key,1);
                level = $(obj).attr('data-level');
                $(obj).parent().parent().parent().nextAll().each(function() {
                    if ($(this).attr('data-level') > level) {
                        key = $.inArray(parseInt($(this).attr('data-id')), arr);
                        if (-1 < key) arr.splice(key,1);
                    } else {
                        return false;
                    }
                });
                arr = JSON.stringify(arr);
                setCookies('admin-treeLinkClicked-Arr', arr);
                setCookies('admin-treeLinkClicked_All', 0);
            }

            var status = 'open';
            $(obj).attr('src', '__SKIN__/images/tv-expandable.gif');     

            // 如果是点击减号, 遍历循环他下面的所有都关闭
            var fnd = false;
            var cur_tr = obj.parentNode.parentNode.parentNode;
            var tbl = document.getElementById("arctype_table");
            for (var i = 0; i < tbl.rows.length; i++) {
                var row = tbl.rows[i];
                if (row == cur_tr) {
                    fnd = true;
                } else {
                    if (fnd == true) {
                        var cur_level = $(cur_tr).data('level');
                        var level = parseInt($(row).data('level'));
                        if (level > cur_level) {
                            $(row).hide();        
                            $(row).find('img.has_children').attr('src','__SKIN__/images/tv-expandable.gif');
                        } else {
                            fnd = false;
                            break;
                        }
                    }
                }
            }
        }
        setCookies('admin-treeClicked', status);
    }
</script>
